<template>
    <div id="analysis">
        <el-card v-loading="loading">
            <div slot="header">
                问卷分析
                <el-button type="primary" circle class="add" size='mini' @click="back">返回</el-button>
                <el-switch style="display: block" v-model="value" active-color="#3C8DBC" inactive-color="#ccc" active-text="题目分析" inactive-text="整体分析">
                </el-switch>
            </div>
            <transition name="el-zoom-in-center">
                <div class="histogramWrap" v-show="value">
                    <h1>题目分析</h1>
                    <ve-histogram :data="total"></ve-histogram>
                </div>
            </transition>
            <transition name="el-zoom-in-center">
                <div class="histogramWrap" v-show="!value">
                    <h1>整体分析</h1>
                    <ve-pie :data="total2"></ve-pie>
                </div>
            </transition>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            answer: [],
            item: [],
            content: [],
            value: true,
            loading:false,
        }
    },
    computed: {
        total() {
            let rows = [];
            let columns = ['题目'];
            let res = {};
            this.content.forEach(el => {
                res[el.outline_name] = {};//res:{117:0,}
                rows.push({
                    题目: el.outline_name,
                })
            })
            this.item.forEach(el1 => {
                this.content.forEach(el2 => {
                    res[el2.outline_name][el1.id] = 0;//res:{css3:{12:0}} 将"完全听不懂"的id保存
                })
                columns.push(el1.item_name)
            })
            this.answer.forEach(el => {
                console.log(el);
                el.content.forEach(sel => {
                    res[sel.outline_name][sel.answer]++;
                })
            })
            rows.forEach(r => {
                this.item.forEach(el => {
                    r[el.item_name] = res[r.题目][el.id];
                })
            })
            return {
                columns,
                rows
            }
        },
        total2() {
            let rows = [];
            let res = {};
            let map = {};
            this.item.forEach(el => {
                res[el.id] = 0;
                map[el.item_name] = el.id;
                rows.push({
                    x: el.item_name,
                    y: ''
                })
            })
            this.answer.forEach(el => {
                el.content.forEach(sel => {
                    res[sel.answer]++;
                })
            })
            rows.forEach(r => {
                r.y = res[map[r.x]];
            })
            return {
                columns: ['x', 'y'],
                rows
            }
        }
    },
    created() {
        this.id = this.$route.params.id
        this.getPapers();
    },
    methods: {
        getPapers() {
            this.axios.get('/papers/answer/' + this.id).then((ret) => {
                this.item = JSON.parse(ret.data.data.item)
                this.answer = ret.data.data.answers;
                this.content = JSON.parse(ret.data.data.content);
            }).catch(() => { })
        },
        back() {
            this.$router.push({ name: 'papers' })
        }
    }
}
</script>
<style lang="less" scoped>
h1{
    margin: 21px 0;
}
.el-switch {
    float: right;
}
</style>
